<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2024/8/20
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<link rel="stylesheet" type="text/css" href="${path}/static/web/css/AddStyle.css"/>
<script src="${path}/static/web/js/jquery-3.6.0.min.js"></script>
<html>
<head>
    <title>业主注册</title>
</head>
<body style="	width:100%;height:100%;background-image:url(${path}/static/web/images/background.jpg);background-repeat: no-repeat;background-position:top center;background-size:cover;background-attachment:fixed;">
    <!-- 添加提交事件 -->
    <script>
        $(function (){
            $("#myform").submit(check);
        });
        function check()
        {

            var ftel = checktel();
            var fpwd = checkPwd2();
          var flag= phoneCheck();
            return ftel&&fpwd&&flag;
        }
    </script>
        <!---注册表单-->
        <div style="background:rgba(0,0,0,0.5);
	width:487px;
	height:400px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-243px;
	margin-top:-171px;
	border-radius:20px;">
            <div class="loginPanel">
        <form id="myform" action="/project/web/check" method="post" enctype="multipart/form-data">
            <table style=" margin:50px auto;">
                <tbody>
                <tr><th colspan="2"><h2 style="width:400px;top:60px;font-size:24px; color:#fff; text-indent:0px;margin-left:-10px;">社区停车位管理系统----业主注册</h2></th></tr>
                <tr><th style="color: white">姓名:</th><td><input name="UserName" placeholder="请输入您的姓名"></td></tr>
             <tr><th style="color: white">手机号:</th><td><input name="UserPhone" placeholder="请输入您的手机号" id="tel"><span id="telRs"></span></td></tr>
             <tr><th style="color: white">密码:</th><td><input name="UserPass"  id="pwd1" type="password" PLACEHOLDER="请输入密码"></td></tr>
              <tr><th style="color: white">确认密码:</th><td>  <input type="password" id="pwd2" placeholder="请再次输入密码"><span id="pwd2Rs" ></span></td></tr>
              <tr><th style="color: white">楼牌号:</th><td><input  name="HouseNumber" id="homenum" placeholder="请输入您的楼牌号"></td></tr>
                <tr><th style="color: white">头像:</th><th style="color: white"> <input type="file" name="face" id="face" accept=".jpg,.jpeg,.webp,.gif,.png"></th></tr>
              <tr><th colspan="2"> <img hidden="hidden" width="50" src="" id="preview"><span id="faceRs"></span></th></tr>
                </tbody>
                <tfoot>
                <tr><th colspan="2"><input type="submit" value="注册">&nbsp;<input type="reset" value="重置" id="reset"></th></tr>
                <tr><th colspan="2"><a href="login" style="text-decoration: none; color: white">已有账号,去登陆</a></th></tr>
                </tfoot>

            </table>
        </form>
    </div>
        </div>
<!-- 验证头像-->
    <script>
        $(function (){
            $("#face").change(checkface);
        });
        function checkface()
        {
            var file = document.getElementById("face").files[0];

            //验证文件扩展名
            var filename = file.name;

            //预览
            var fileReader = new FileReader();

            fileReader.onload = function(e){
                $("#preview").attr("hidden",false);
                $("#preview").attr("src",e.target.result);
            }

            fileReader.readAsDataURL(file);
        }
    </script>
<!-- 验证密码是否为空并且密码是否一致-->
    <script>
        $(function (){
            $("#pwd2").blur(checkPwd2);
        });
        function checkPwd2()
        {
            var pwd1 = $("#pwd1").val();
            var pwd2 = $("#pwd2").val();

            if(pwd1==pwd2&&pwd1!=""&&pwd2!="")
            {
                $("#pwd2Rs").css("color","green");
                $("#pwd2Rs").html("√");
                return true;

            }
            else
            {
                $("#pwd2Rs").css("color","red");
                $("#pwd2Rs").html("密码不一致或不能为空");
                return false;
            }
        }
    </script>

<!-- 验证手机号是否11位-->
    <script type="text/javascript">
        $(function (){
            $("#tel").blur(checktel);
        });
        function checktel()
        {
            var tel = $("#tel").val();
            var reg = /^1[3-9]\d{9}$/;
            var flag = reg.test(tel)
            if(flag==true&&tel!="")
            {
                $("#telRs").css("color","green");
                $("#telRs").html("√");
                phoneCheck();
                return true;
            }
            else
            {
                $("#telRs").css("color","red");
                $("#telRs").html("手机格式错误或不能为空");
                return false;
            }
        }
        function phoneCheck(){
            var tel=$("#tel").val();
            var flag=true;
            $.ajax({
                url:"${path}/web/checkPhoneBeforeRegister",
                data:{
                    userphone:tel
                },
                async:false,
                success:function (mes) {
                    if (mes=="1"){
                        flag=true;
                        $("#telRs").css("color","green");
                        $("#telRs").html("√");
                    }
                    else
                    {
                        flag=false;
                        $("#telRs").css("color","red");
                        $("#telRs").html("手机号已被注册");
                    }
                },
            });
            return flag;
        }
    </script>
</body>
</html>
